<template>
	<view class="container">
		<view class="product-row">
			<image :src="productCover" mode="aspectFit" class="product-img"></image>
			<view class="product-info">
				<text class="product-name">1件{{productName}}</text>
			</view>
		</view>
		<view class="order-item">
			<text class="label">订单编号</text>
			<text class="value">{{orderNo}}</text>
		</view>
		<view class="order-item">
			<text class="label">订单总价</text>
			<text class="price">{{productPrice}}元</text>
		</view>
		<view class="order-item">
			<text class="label">下单时间</text>
			<text class="value">{{createTime}}</text>
		</view>
		<view class="order-item">
			<text class="label">支付时间</text>
			<text class="value">{{payTime}}</text>
		</view>

		<!-- 已出货 -->
		<view v-if="outStatus" class="status-container">
			<text class="completed-text">已完成</text>
		</view>

		<view v-else-if="payStatus" class="status-container">
			<text class="pay-code">出货码: {{payCode}}</text>
			<button class="delivery-button" @click="onDeliveryButtonClicked()">取货</button>
		</view>

		<view v-else class="status-container">
			<button class="pay-button">支付</button>
		</view>
	</view>
</template>

<script>
	let tag = "order"
	export default {
		onLoad(para) {
			this.$log.info(tag, "onLoad")
			this.$log.info(tag, JSON.stringify(para))
			
			// 检查是通过 orderNo 还是 orderInfo 传递
			if (para.orderInfo) {
				// 从订单列表传递的完整订单信息
				try {
					const orderInfo = JSON.parse(decodeURIComponent(para.orderInfo));
					console.log('接收到的订单信息:', orderInfo);
					this.initWithOrderInfo(orderInfo);
				} catch (e) {
					console.error('解析订单信息失败:', e);
					// 如果解析失败，回退到原来的方式
					if (para.orderNo) {
						this.orderNo = para.orderNo
						this.fetchOrderDetail(this.orderNo)
					}
				}
			} else if (para.orderNo) {
				// 传统的通过 orderNo 查询
				this.orderNo = para.orderNo
				this.fetchOrderDetail(this.orderNo)
			}
		},
		data() {
			return {
				orderNo: "",
				productName: "",
				productCover: "",
				productPrice: "",
				createTime: "",
				payTime: "",
				orderStatus: "",
				payStatus: "",
				payCode: "",
				outStatus: false,
			}
		},
		methods: {
			// 使用订单信息初始化页面
			initWithOrderInfo(orderInfo) {
				console.log('初始化订单信息:', orderInfo);
				
				// 设置页面数据
				this.orderNo = orderInfo.orderNo || orderInfo.id;
				this.productName = orderInfo.productName || '';
				this.productCover = orderInfo.productCover || '';
				this.productPrice = orderInfo.productPrice || orderInfo.payAmount || '';
				this.createTime = orderInfo.createTime || '';
				this.payTime = orderInfo.payTime || '';
				this.orderStatus = orderInfo.orderStatus || '';
				this.payStatus = orderInfo.payStatus || '';
				this.payCode = orderInfo.payCode || '';
				
				// 设置支付状态和出货状态
				if (this.payStatus === "已支付" || this.orderStatus === "已支付") {
					this.payStatus = true;
				} else {
					this.payStatus = false;
				}
				
				if (this.orderStatus === "已出货") {
					this.outStatus = true;
				} else {
					this.outStatus = false;
				}
				
				console.log('初始化后的数据:', {
					orderNo: this.orderNo,
					productName: this.productName,
					productCover: this.productCover,
					productPrice: this.productPrice,
					orderStatus: this.orderStatus,
					payStatus: this.payStatus,
					outStatus: this.outStatus
				});
			},
			onDeliveryButtonClicked() {
				this.$log.info(tag, "onDeliveryButtonClicked")
				this.deliverOrder(this.orderNo)
			},
			deliverOrder(orderNo) {
				this.$log.info(tag, "deliverOrder")
				uni.request({
					url: `${this.constant.BASE_URL}/api/order/remotePick`,
					method: 'GET',
					header: {
						'Authorization': this.loginManager.getToken(),
					},
					data: {
						"orderNo": orderNo
					},
					success: (res) => {
						this.$log.info(tag, "success")
						this.$log.info(tag, JSON.stringify(res.data))
						if (res.data.code === 200) {
							// 取货成功后更新状态
							this.outStatus = true;
							this.orderStatus = "已出货";
							uni.showToast({
								title: '取货成功',
								icon: 'success'
							});
						}
					},
					fail: (err) => {
						this.$log.error(tag, err.errMsg)
						uni.showToast({
							title: '取货失败',
							icon: 'error'
						});
					}
				})
			},
			isOut() {
				return this.orderStatus == "已出货"
			},
			isPaid() {
				return this.payStatus == "已支付" || this.payStatus === true
			},
			fetchOrderDetail(orderNo) {
				this.$log.info(tag, `fetchOrderDetail orderNo: ${orderNo}`)
				uni.request({
					url: `${this.constant.BASE_URL}/api/order/${orderNo}`,
					method: 'POST',
					header: {
						'Authorization': this.loginManager.getToken(),
					},
					success: (res) => {
						this.$log.info(tag, "success")
						this.$log.info(tag, JSON.stringify(res.data))
						if (res.data.code == 200) {
							let order = res.data.data
							this.productCover = `${this.constant.BASE_URL}${order.productCover}`
							this.productName = order.productName
							this.productPrice = order.productPrice
							this.createTime = order.createTime
							this.orderNo = order.orderNo
							this.payTime = order.payTime
							this.orderStatus = order.orderStatus
							this.payStatus = order.payStatus
							this.payCode = order.payCode
							if (order.payStatus == "已支付") {
								this.payStatus = true
							} else {
								this.payStatus = false
							}
							if (order.orderStatus == "已出货") {
								this.outStatus = true
							} else {
								this.outStatus = false
							}
						}
					},
					fail: (err) => {
						this.$log.error(tag, err.errMsg)
						uni.showToast({
							title: '加载订单详情失败',
							icon: 'error'
						});
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.product-row {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 20rpx;
	}

	.product-img {
		width: 200rpx;
		height: 400rpx;
		margin-right: 30rpx;
		border-radius: 16rpx;
		object-fit: cover;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.product-info {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100%;
	}

	.product-name {
		font-size: 36rpx;
		color: #666;
		text-align: right;
		padding: 10rpx 0;
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.value {
		font-size: 32rpx;
		color: #666;
	}

	.price {
		font-size: 34rpx;
		color: #007aff;
		font-weight: 600;
	}

	.status-container {
		margin-top: 60rpx;
		padding: 40rpx;
		background-color: #f8f9fa;
		border-radius: 20rpx;
		text-align: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.completed-text {
		font-size: 38rpx;
		color: #007aff;
		font-weight: 600;
		padding: 20rpx 0;
		display: inline-block;
	}

	.pay-code {
		font-size: 34rpx;
		color: #007aff;
		font-weight: 600;
		margin-bottom: 30rpx;
		display: block;
		letter-spacing: 2rpx;
		padding: 15rpx 0;
		background-color: rgba(0, 122, 255, 0.05);
		border-radius: 10rpx;
	}

	.pay-button {
		width: 240rpx;
		height: 90rpx;
		background: linear-gradient(135deg, #007aff 0%, #0066cc 100%);
		color: white;
		border-radius: 45rpx;
		font-size: 34rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
		transition: all 0.2s ease;
	}

	.pay-button:active {
		transform: scale(0.96);
		box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.15);
	}

	.delivery-button {
		width: 240rpx;
		height: 90rpx;
		background: linear-gradient(135deg, #007aff 0%, #0066cc 100%);
		color: white;
		border-radius: 45rpx;
		font-size: 34rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
		transition: all 0.2s ease;
	}

	.delivery-button:active {
		transform: scale(0.96);
		box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.15);
	}
</style>